<template>
    <div class="container mt-2">

        <h3>账号登录</h3>
        <hr>
        <el-form ref="loginForm" :rules="rules" @submit.prevent="submit" size="large" :model="formData"
            label-position="top">
            <el-form-item prop="username" label="账号">
                <el-input v-model="formData.username" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item prop="password" label="密码">
                <el-input v-model="formData.password" type="password" placeholder="请输入账号密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button native-type="submit" type="primary" plain style="width:100%;">立即登录</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>
<script setup>
import { ref, useTemplateRef } from 'vue'
import { useRouter } from 'vue-router'
import http from '@/utils/http'
const router = useRouter()
const loginFormRef = useTemplateRef('loginForm')
const formData = ref({ username: '', password: '' })
const rules = {
    username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    password: [{ required: true, message: '请输入账号密码', trigger: 'blur' }]
}
const submit = () => {
    loginFormRef.value.validate(async valid => {
        if (valid) {
            const result = await http.post('/api/user/login/', { ...formData.value })
            if (result.status == 200) {
                localStorage.setItem('token', result.data.token)
                router.push('/ucenter')
            }
        }
    })

}
</script>